<template>
  <div class="order">
    <div class="common-space"></div>
    <div class="order-number" v-if="type !== 'selling' && type !== 'off'">
      订单号：{{ data.orderNo }}
    </div>
    <div class="order-wrapper">
      <div class="order-img">
        <img :src="data.icon" alt="" />
      </div>
      <div class="order-info">
        <div class="order-info-name">
          {{ data.skuName }}
        </div>
        <div class="order-info-base">商品ID：{{ data.stockNo }}</div>
        <div class="order-info-base">上架时间：{{ data.gmtCreate }}</div>
        <div class="order-info-base" v-if="type === 'complete'">
          {{ data.orderStatus === 'RECEIPTED' ? '' : '预计' }}到账时间：{{
            data.orderStatus === 'RECEIPTED'
              ? data.actualArriveDate
              : data.predictArriveDate
              ? data.predictArriveDate.split(' ')[0]
              : ''
          }}
        </div>
        <div class="order-info-base">
          {{ type === 'complete' ? '结算价：' : '寄售价：' }}
          <span class="order-info-price"
            >￥{{
              type === 'complete' ? data.settlementPrice : data.realPrice
            }}</span
          >
        </div>
      </div>
    </div>
    <div class="order-extra">
      <div
        class="order-extra-status"
        :class="{
          'order-extra-status-success': data.orderStatus === 'RECEIPTED',
        }"
      >
        {{ orderStatus || (type === 'off' ? '已下架' : '') }}
      </div>
      <div class="order-extra-btns">
        <van-button
          size="small"
          round
          v-if="type === 'selling'"
          @click="soldOut(data.id)"
        >
          下架
        </van-button>
        <van-button
          size="small"
          round
          v-if="
            type === 'issue' ||
            (type === 'complete' && data.orderStatus === 'REFUNDED')
          "
          @click="viewDispute(data.orderNo)"
        >
          查看纠纷
        </van-button>
        <van-button
          size="small"
          round
          v-if="
            type === 'selling' ||
            type === 'issue' ||
            (type === 'complete' && data.orderStatus === 'REFUNDED')
          "
          @click="
            showcode({
              cardType: data.cardType,
              cardVData: {
                cardValue: data.cardValue,
                cardPwd: data.cardPwd,
              },
            })
          "
        >
          查看券码
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'order',
  components: {},
  props: {
    /**
     * 订单类型：selling | issue | complete | off
     */
    type: {
      type: String,
      default: 'selling'
    },
    data: {}
  },
  data () {
    return {
      sideBarActKey: 0,
      homeCateHeight: 0
    }
  },
  mounted () { },
  methods: {
    toSell () {
      this.$router.push('/sellGoods')
    },
    viewDispute (orderNo) {
      this.$router.push(`/dispute/${orderNo}`)
    },
    // 下架
    soldOut (id) {
      this.$dialog.confirm({
        title: '下架商品',
        message: '确定下架此商品吗?'
      }).then(() => {
        // on confirm
        this.$emit('soldOut', id)
      })
    },
    // 预览
    showcode (url) {
      this.$emit('showcode', url)
    }
  },
  computed: {
    orderStatus () {
      const OrderStatus = {
        WAIT_PAY: '待付款',
        CANCELED: '已取消',
        WAIT_DELIVERY: '待发货',
        WAIT_RECEIPT: '待收货',
        WAIT_MERCHANT: '待商家处理',
        WAIT_PLATFORM: '待平台处理',
        WAIT_REFUND: '退款中',
        REFUNDED: '已退款',
        RECEIPTED: '已收货'
      }
      return OrderStatus[this.data.orderStatus]
    }
  }
}
</script>
<style lang="scss" scoped src="./styles/index.scss"></style>
